<template>
    <div class="search-bar" :style="{backgroundColor: flag ? 'rgba(32,32,32,0.9)' : isFocus ? 'rgba(59,59,59,0.8)' : 'rgba(0,0,0,0)'}">
        <div :class="isFocus ? 'search-bar-nav search-bar-hide' : 'search-bar-nav'">
            <div class="search-slide-menu" @click="toggleBar"></div>
        </div>
        <div class="search-bar-input" :style="{width:isFocus ? '7.2rem' : '5.78rem'}">
            <div class="search-view">
                <div :class="isFocus ? 'search-icon search-icon-active' : 'search-icon'">
                    <span></span> {{isFocus ? '' : 'Search'}}
                </div>
                <input id="search" @keyup="write" @focus="focus" @blur="cancel" :blur="isFocus" type="text" class="search" />
            </div>
            <div :class="isFocus ? 'search-cancel search-cancel-active' : 'search-cancel'" @click="cancelBybtn">取消</div>
        </div>
        <div :class="isFocus ? 'search-bar-nav search-bar-hide' : 'search-bar-nav'">
            <div @click="scanQRCode" class="location"></div>
        </div>
        <div :class="isFocus ? 'search-list search-list-active' : 'search-list'">
            <div class="search-tip">
                {{word == "" ? "" : '搜索：' + word}}
            </div>
            <div class="search-result-content" @click="cancel">
                <collect-item v-for="item in result" :key="'searchItem' + item.pro_code_bar" :data="item"></collect-item>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapGetters
    } from 'vuex'
    import CollectItem from "@/components/CollectItem.vue"
    import API from '@/util/api'

    export default {
        props: {
            flag: {
                type: [Boolean, Number],
                default: false
            }
        },
        data() {
            return {
                isFocus: false,
                isShowList: false,
                word: "",
                result: [],
                time: null
            }
        },
        components: {
            CollectItem
        },
        methods: {
            scanQRCode() {
                wx.ready(() => {
                    wx.scanQRCode({
                        needResult: 1, 
                        scanType: ["qrCode", "barCode"], 
                        success: res => {
                            console.log(res)
                        }
                    })
                })
            },
            toggleBar() {
                this.$parent.$parent.$parent.$refs.drawer.toggle()
            },
            focus() {
                this.isFocus = true
                this.isShowList = true
            },
            cancel() {
                this.isFocus = (this.word !== "") ? 1 : 0
            },
            cancelBybtn() {
                this.isFocus = false
                this.result = []
                this.word = ""
                document.getElementById("search").value = ""
            },
            write(event) {
                this.word = (event.target.value).replace(" ", "")
                if(this.word !== "" && !this.time) {
                    this.time = setTimeout(() => {
                        this.getResult()
                        clearTimeout(this.time)
                        this.time = null
                    }, 600)
                } else {
                    this.result = []
                }
            },
            getResult() {
                this.$ajax(API.getSearch(this.word)).then(e => {
                    if(e.code === 200) {
                        this.result = e.result
                    }
                }).catch(err => {
                    console.log("搜索出错", err)
                })
            }
        },
        activated() {
            this.time = null
            this.isFocus = false
            this.isShowList = false
            this.word = ""
            this.result = []
        },
        computed: {
            ...mapGetters([
                'wechat'
            ])
        }
    }
</script>

<style>
    .search-bar {
        width: 100%;
        height: 44px;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 2000;
        background: rgba(0, 0, 0, 0);
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #FFF;
    }
    
    .search-bar-nav {
        width: 40px;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: ease-in-out all .2s;
        opacity: 1;
    }
    
    .search-bar-nav>div,
    .search-bar-nav>a {
        height: 44px;
        max-height: 46px;
        width: 40px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 20px auto;
    }
    
    .search-bar-hide {
        width: 0;
        opacity: 0;
    }
    
    .search-slide-menu {
        background-image: url('');
    }
    
    .location {
        background-image: url("../assets/scan.png");
    }
    
    .search-bar-input {
        /*width: 5.78rem;*/
        height: 30px;
        max-height: 30px;
        border-radius: 15px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        transition: all linear .2s;
    }
    
    .search-view {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #FFF;
        border-radius: 15px;
    }
    
    .search-icon {
        width: 100%;
        height: 30px;
        max-height: 30px;
        font-size: 16px;
        position: absolute;
        justify-content: center;
        display: flex;
        align-items: center;
        left: 0;
        top: 0;
        transition: all linear .2s;
        background: #FFF;
        z-index: 20;
        color: #9C9C9C;
    }
    
    .search-icon-active {
        width: 60px
    }
    
    .search-cancel {
        width: 0;
        height: 30px;
        text-align: center;
        font-size: 14px;
        color: #FFF;
        line-height: 30px;
        transition: all linear .2s;
        opacity: 0;
    }
    
    .search-cancel-active {
        width: 1.2rem;
        max-width: 50px;
        opacity: 1;
    }
    
    .search-icon>span {
        content: "";
        width: 16px;
        height: 16px;
        background-image: url("");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
        display: inline-block;
        margin-right: 4px;
    }
    
    .search {
        height: 100%;
        width: 100%;
        border-radius: 15px;
        -webkit-appearance: none;
        border: none;
        outline: none;
        background: none;
        color: #333;
        padding: 0 28px 0 60px;
        z-index: 30;
        font-size: 14px;
    }
    
    .search-list {
        width: 100%;
        height: 100vh;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1200;
        background: #FFF;
        opacity: 0;
        display: none;
        transition: all linear .2s;
    }
    
    .search-list-active {
        width: 100%;
        height: calc(100vh - 44px);
        position: absolute;
        left: 0;
        top: 44px;
        background: #FFF;
        opacity: 1;
        display: block;
        z-index: 200;
    }
    
    .search-tip {
        height: .6rem;
        max-height: 50px;
        padding: 0 16px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        font-size: 12px;
        font-weight: 700;
        color: #5179f1;
    }
    /*result*/
    
    .search-result {
        flex: 1 1 auto;
        width: 100%;
        background: #FBFCFD;
        margin-bottom: 0.6rem;
    }
    
    .search-result-content {
        width: 100%;
        height: 100%;
        padding-bottom: 0.8rem;
        overflow: scroll;
    }
</style>